<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>答题PK</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script type="text/javascript" src="js/moduls/pk.js"></script>
		<link rel="stylesheet" href="css/answerQue.css" />
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div class="content">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="subTop">
				<div class="picture">
					<img src="img/title2.png" />
				</div>
				<div class="right_items">
					<div class="remind"><img src="img/answerQue/queIcon1.png" /></div>
					<div class="refresh"><img src="img/answerQue/queIcon2.png" /></div>
					<!--<div class="delay"><img src="img/answerQue/queIcon3.png" /></div>-->
				</div>
			</div>
			<div class="back">
				<div class="backBtn">
					<a href="javascript:history.go(-1)"><img src="img/closeBtn.png" alt=""></a>
				</div>

			</div>
			<div class="middlePath">
				<div class="title">
					<img src="img/answerQue.png" alt="">
				</div>

				<div class="midContent">

					<div class="line">
						<img src="img/line.png" alt="">
					</div>
					<div id="queBox">
						<div class="question">
							<div class="countDown" style="color: #fff;text-align: right;">倒计时：</div>
							<div class="issue">题目：{{questions[qNext].title}}</div>
							<!--<div class="issue">题目：{{questions[qNext-1].title}}</div>-->

							<!--<div :class="clickoption==index?'answer selected':'answer'" v-for="(item,index) in questions[qNext-1].options" :key="index" @click="selectOption(index)">{{item.answer}}</div>-->
							<div :class="clickoption==index?'answer selected':'answer'" v-for="(item,index) in questions[qNext].options" :key="index" @click="selectOption(index)">{{optionCode[index]}}:{{item}}</div>
						</div>
					</div>

					<div class="line">
						<img src="img/line.png" alt="">
					</div>
				</div>
				<div class="bottomBtn">
					<!--<div class="choose" v-if="qNext==questions.length-1" @click="subQue">提交</div>
					<div class="choose" v-else @click="nextQue">下一题</div>-->
					<div class="choose" v-if="qNext==100" @click="subQue">提交</div>
					<div class="choose" v-else @click="nextQue">下一题</div>
				</div>
				<div class="bottom-logo">
					<img src="img/bottom_logo2.png" />
				</div>
			</div>
		</div>

		<script>
			var app = new Vue({
				el: '.content',
				data: {
					qNext: 0,
					answer: -1,
					clickoption: 10,
					questions: [{
						"title": "",
						"answer": "",
						"options": []
					}],
					optionCode: [],
					score: 0
				},

				methods: {
					nextQue() {
						if(this.answer == -1) {
							alert("请选择答案");
							return;
						}

						if(this.qNext == this.questions.length - 1) {
							this.clickoption = 10;
							addQuestion();
							return;
						}

						var t_answer = this.questions[this.qNext]["answer"];
						if(t_answer == this.answer) {
							this.score += 2;
						} else {
							this.score -= 1;
						}

						this.clickoption = 10;
						this.qNext += 1;
						//						this.optionCode.length = this.questions[this.qNext]["options"].length;
						this.optionCode = [];
						for(let i = 0; i < this.questions[this.qNext]["options"].length; i++) {
							var t_code = String.fromCharCode(i + 65);
//							console.log(t_code)
							this.optionCode.push(t_code);
						}
						this.answer = -1;
					},
					subQue() {
						var t_answer = this.questions[this.qNext]["answer"];
						if(t_answer == this.answer) {
							this.score += 2;
						} else {
							this.score -= 1;
						}

						alert("提交成功");
					},
					selectOption(index) {
						this.clickoption = index;
						this.answer = index;
					}
				}

			})

			addQuestion();

			function addQuestion() {
				getQuestion(5, function(res) {
					app.questions = res;
					for(let i = 0; i < app.questions.length; i++) {
						var t_options = app.questions[i]["options"];
						for(let j = 0; j < t_options.length; j++) {
							if(i == 0) {
								var t_code = String.fromCharCode(j + 65);
								app.optionCode.push(t_code);
							}
						}
					}
					app.qNext = 0;
				})
			}
			
			//点击刷新
			$(".refresh").click(function(){
				
			})
		</script>

	</body>

</html>